<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="shop">
    <meta name="author" content="letsun">

    <title>购物车</title>

    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../plugs/fontAwesome/4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/jquery.gritter.css">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-sticky-footer.css">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-fix.css">
    <link rel="stylesheet" type="text/css" href="../css/foot.css">

    <script src="../js/jquery.gritter.min.js"></script>
    <script src="../js/jquery.gritter.min.extend.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <style>
        .main {
            height: 100%;
        }

        .page-content {
            position: relative;
        }

        .mask {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            color: #FFF;
            text-align: center;
            padding-top: 50%;
            font-size: 40px;
        }

        .cartPanel {
            width: 100%;
            height: 100px;
            border-bottom: 1px solid #DDD;
            background: #FFF;
        }

        .cartSelect {
            float: left;
            width: 30px;
            height: 100px;
            line-height: 100px;
            font-size: 20px;
        }

        .cartGoods {
            height: 100px;
            margin-left: 30px;
            padding: 10px;
            text-align: left
        }

        .cartGoods img {
            float: left;
            width: 80px;
            height: 80px;
        }

        .itemPrice {
            float: right;
            width: 50px;
            text-align: right;
            font-size: 12px;
        }

        .pricePanel {
            height: 40px;
        }

        .trashPanel {
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            color: #cdcdcd
        }

        .goodInfo {
            margin-left: 80px;
            margin-right: 50px;
            width: auto;
        }

        .goodTitlePanel {
            font-size: 14px;
            line-height: 15px;
            margin: 5px;
            height: 30px;
            overflow: hidden;
        }

        .goodTitlePanel span {
            word-wrap: break-word;
            text-overflow: ellipsis;
            color: #666;
        }

        .goodNum {
            height: 40px;
            padding: 0px 5px;
        }

        .numCont {
            width: 105px;
            height: 26px;
            background: #EEE;
            line-height: 24px;
            border: 1px solid #CCC;
            border-radius: 2px;
        }

        .numAdd {
            width: 32px;
            display: block;
            float: left;
            text-align: center;
            border-right: 1px solid #CCC;
        }

        .numReduction {
            width: 32px;
            display: block;
            float: left;
            text-align: center;
            border-left: 1px solid #CCC;
        }

        .numShow {
            width: 37px;
            display: block;
            float: left;
            text-align: center;
            background: #FFF;
            color: #333
        }

        .payPanel {
            position: fixed;
            bottom: 0px;
            width: 100%;
            height: 50px;
            padding: 5px;
            background: #DDD;
        }

        .radioAll {
            float: left;
            width: 20px;
            height: 50px;
            line-height: 40px;
            font-size: 20px;
        }

        .sumMoney {
            float: left;
            width: auto;
            max-width: 200px;
            height: 50px;
            line-height: 40px;
            font-size: 14px;
        }

        .payBtn {
            display: block;
            float: right;
            width: 120px;
            height: 40px;
            color: #FFF;
            background: #FF6666;
            line-height: 40px;
            border-radius: 20px;
        }
        .shopName{
            padding: 0 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    </style>
</head>

<body>
<nav class="navbar navbar-default navbar-static-top navbar-shortcut">
    <div class="container">
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right navbar-nav-jd">
                <li>
                    <a href="http://192.168.1.42:8888/shop-pc/setting/profile" class="link-user">您好,18720989381</a>
                </li>
                <li>
                    <a href="http://192.168.1.42:8888/shop-pc/logout" class="link-logout">退出</a>
                </li>
                <li>
                    <a target="_blank" href="http://192.168.1.42:8888/shop-pc/manage/order">我的订单</a>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<!--- 导航： begin -->
<div id="nav">
    <div class="w container">
        <!-- logo begin -->
        <div class="logo">
            <a href="http://192.168.1.42:8888/shop-pc/" target="_blank" class="fore1"></a>
            <a href="http://192.168.1.42:8888/shop-pc/setting/profile" target="_self" class="fore2">我的淘惠帮</a>
            <a href="http://192.168.1.42:8888/shop-pc/" target="_blank" class="fore3">返回淘惠帮</a>
        </div>
        <!-- logo end -->

        <div class="pull-right">
            <form class="navbar-form navbar-left navbar-form-jd" role="search" action="http://192.168.1.42:8888/shop-pc/goods/search">
                <div class="form-group">
                    <input type="text" class="form-control" name="search_CN_title" placeholder="水果">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
                <a href="http://192.168.1.42:8888/shop-pc/cart" class="btn btn-default">购物车</a>
            </form>

        </div>
    </div>
</div>
<!--- 导航： end -->

<div class="container">
    <div class="row">
        <div class="col-md-1">
            <div class="menu">
                <ul class="list-unstyled">
                    <li>
                        <a href="http://192.168.1.42:8888/shop-pc/setting/profile">个人信息</a>
                    </li>
                    <li>
                        <a href="http://192.168.1.42:8888/shop-pc/manage/address">我的地址</a>
                    </li>
                    <li>
                        <a href="http://192.168.1.42:8888/shop-pc/manage/order">订单信息</a>
                    </li>
                    <li>
                        <a href="http://192.168.1.42:8888/shop-pc/manage/goodscomment">我的评价</a>
                    </li>
                    <li>
                        <a href="http://192.168.1.42:8888/shop-pc/manage/goodscollect">我的收藏</a>
                    </li>
                    <li>
                        <a href="http://192.168.1.42:8888/shop-pc/setting/password">修改密码</a>
                    </li>
                    <li class="active">
                        <a href="http://192.168.1.42:8888/shop-pc/cart">购物车</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-11">

            <div class="mask">
                <span style="margin:auto;">
                    <i class="fa fa-spinner fa-spin"></i>
                </span>
            </div>

            <!-- page-header -->
            <div class="page-header">
                <div class="page-comm">
                    <div class="mt">
                        <h3>我的购物车</h3>
                    </div>
                    <div class="mc">
                        <p>使用购物车,可以将您喜欢的商品加入进去,最后合计结算。</p>
                    </div>
                </div>
            </div>
            <!-- /.page-header -->

            <!-- page-content -->
            <div class="page-content">
                <div class="page-comm">
                    <h3 class="shopName">店铺名</h3>
                    <ul>
                        <li id="cartItem2">
                            <!-- cartPanel begin-->
                            <div class="cartPanel">

                                <!-- cartSelect begin-->
                                <div id="goodItem2" class="cartSelect">
                                    <a href="http://192.168.1.42:8888/shop-pc/cart#" onclick="cancelGood(this)" data-good="2" class="selectStatus" style="color:#CC0033;display: block   ;">
                                        <i class="fa fa-check-circle"></i>
                                    </a>

                                    <a href="http://192.168.1.42:8888/shop-pc/cart#" onclick="selectGood(this)" data-good="2" class="cancelStatus" style="color:#CCC;display:  none   ;">
                                        <i class="fa fa-circle-thin"></i>
                                    </a>
                                </div>
                                <!-- cartSelect end-->

                                <!-- cartGoods begin -->
                                <div class="cartGoods">
                                    <img src="../images/20150319162748322.jpg">

                                    <!-- itemPrice begin -->
                                    <div class="itemPrice">
                                        <div class="pricePanel"><em class="price">￥19.9</em></div>

                                        <div class="trashPanel">
                                            <a onclick="delGood(2)">
                                                <i class="fa fa-trash-o"></i>
                                            </a>
                                        </div>
                                    </div><!-- /itemPrice end -->


                                    <!-- goodInfo begin -->
                                    <div class="goodInfo">
                                        <!-- goodTitlePanel begin-->
                                        <div class="goodTitlePanel" style="">
                                            <a href="http://192.168.1.42:8888/shop-pc/goods/2">
                                                <span>河北皇冠梨2.5kg</span>
                                            </a>
                                        </div><!-- /goodTitlePanel end-->

                                        <!-- goodNum begin-->
                                        <div class="goodNum">
                                            <div class="numCont"><!--numCont begin-->
                                                <span class="numAdd" onclick="reduceNum(2)">-</span>
                                                <span id="num2" class="numShow">1</span>
                                                <span class="numReduction" onclick="addNum(2)">+</span>
                                            </div><!-- /numCont end-->
                                        </div><!-- /goodNum end-->
                                    </div><!-- /goodInfo end -->

                                </div><!-- /cartGoods end-->

                            </div><!-- /cartPanel end-->
                        </li>
                        <li id="cartItem4">
                            <!-- cartPanel begin-->
                            <div class="cartPanel">

                                <!-- cartSelect begin-->
                                <div id="goodItem4" class="cartSelect">
                                    <a href="http://192.168.1.42:8888/shop-pc/cart#" onclick="cancelGood(this)" data-good="4" class="selectStatus" style="color:#CC0033;display: block   ;">
                                        <i class="fa fa-check-circle"></i>
                                    </a>

                                    <a href="http://192.168.1.42:8888/shop-pc/cart#" onclick="selectGood(this)" data-good="4" class="cancelStatus" style="color:#CCC;display:  none   ;">
                                        <i class="fa fa-circle-thin"></i>
                                    </a>
                                </div>
                                <!-- cartSelect end-->


                                <!-- cartGoods begin -->
                                <div class="cartGoods">
                                    <img src="../images/20130522145012374.jpg">

                                    <!-- itemPrice begin -->
                                    <div class="itemPrice">
                                        <div class="pricePanel"><em class="price">￥0.01</em></div>

                                        <div class="trashPanel">
                                            <a onclick="delGood(4)">
                                                <i class="fa fa-trash-o"></i>
                                            </a>
                                        </div>
                                    </div><!-- /itemPrice end -->


                                    <!-- goodInfo begin -->
                                    <div class="goodInfo">
                                        <!-- goodTitlePanel begin-->
                                        <div class="goodTitlePanel" style="">
                                            <a href="http://192.168.1.42:8888/shop-pc/goods/4">
                                                <span>香气浓，味道好</span>
                                            </a>
                                        </div><!-- /goodTitlePanel end-->

                                        <!-- goodNum begin-->
                                        <div class="goodNum">
                                            <div class="numCont"><!--numCont begin-->
                                                <span class="numAdd" onclick="reduceNum(4)">-</span>
                                                <span id="num4" class="numShow">1</span>
                                                <span class="numReduction" onclick="addNum(4)">+</span>
                                            </div><!-- /numCont end-->
                                        </div><!-- /goodNum end-->
                                    </div><!-- /goodInfo end -->

                                </div><!-- /cartGoods end-->

                            </div><!-- /cartPanel end-->
                        </li>
                    </ul>

                    <div class="clearfix">
                        <!-- 购物车结算 -->
                        <div class="radioAll" style="padding-left:40px;">
                            <a style="display:block;color:#CCC" class="cancelStatus" onclick="selectAll()">
                                <i class="fa fa-circle-thin"></i>
                            </a>

                            <a style="display:none;color:#CC0033;" class="selectStatus" onclick="cancelAll()">
                                <i class="fa fa-check-circle"></i>
                            </a>
                        </div>
                        <div class="pull-right">
                            <span style="margin-right:10px;">总计:<em id="money" class="price">￥19.91</em></span>
                            <a onclick="calculate()" class="btn btn-danger">结算(<span id="sumNum">2</span>)</a>
                        </div>
                    </div>

                </div>
            </div>
            <!-- /.page-content -->


            <form id="validation-form" method="get" action="http://192.168.1.42:8888/shop-pc/manage/order/create">

            </form>
        </div>
    </div>
</div>

<!--service: 服务  begin-->
<div class="service-area">
    <div class="slogen-panel">
        <ul>
            <li><a href="http://192.168.1.42:8888/shop-pc/cart#"><img src="../images/b_1.png"> <h4>品质保证</h4>
                <p>货到付款</p></a></li>
            <li><a href="http://192.168.1.42:8888/shop-pc/cart#"><img src="../images/b_2.png"> <h4>七天无理由退换</h4>
                <p>国免邮</p></a></li>
            <li><a href="http://192.168.1.42:8888/shop-pc/cart#"><img src="../images/b_3.png"> <h4>特色服务体验</h4>
                <p>自营冷链全国配送</p></a></li>
            <li><a href="http://192.168.1.42:8888/shop-pc/cart#"><img src="../images/b_4.png"> <h4>有机农场</h4>
                <p>新蔬直供</p></a></li>
            <li><a href="http://192.168.1.42:8888/shop-pc/cart#"><img src="../images/b_4.png"> <h4>帮助中心</h4>
                <p>国免邮</p></a></li>
        </ul>
    </div>

    <div class="service-panel">

        <dl class="service-item cot5">
            <dt>食品安全</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="http://www.sxmmd.com/help/2">有机农场</a></div>
                <div><a href="http://www.sxmmd.com/help/3">采购标准</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/4">食品信息公开透明</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/5">透明社区经营理念</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/6">我们的资质</a></div>
            </dd>
        </dl>

        <dl class="service-item cot5">
            <dt>新手教程</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="http://192.168.1.42:8888/shop-pc/help/8">购物流程</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/9">注册登录</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/10">账户充值</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/11">如何提货</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/12">会员政策</a></div>
            </dd>
        </dl>

        <dl class="service-item cot5">
            <dt>配送方式</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="http://192.168.1.42:8888/shop-pc/help/14">自营全程冷链配送</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/15">配送范围</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/16">运费标准</a></div>
            </dd>
        </dl>

        <dl class="service-item cot5">
            <dt>支付方式</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="http://192.168.1.42:8888/shop-pc/help/18">货到付款</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/19">在线支付</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/20">账户余额支付</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/21">退款说明</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/22">多种福利卡</a></div>
            </dd>
        </dl>

        <dl class="service-item cot5">
            <dt>售后服务</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="http://192.168.1.42:8888/shop-pc/help/24">退换货政策</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/25">退换货流程</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/26">发票制度</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/27">投诉建议</a></div>
            </dd>
        </dl>

        <dl class="service-item cot5">
            <dt>帮助信息</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="http://192.168.1.42:8888/shop-pc/help/29">安全食品采购指南</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/30">常见问题</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/31">电子优惠券的使用</a></div>
                <div><a href="http://192.168.1.42:8888/shop-pc/help/32">礼品卡</a></div>
            </dd>
        </dl>

    </div>
</div>
<!--service: 服务 end -->

<!-- footer:页脚  begin -->
<div class="footer">
    <div class="foot-panel">
        <div style="float:left;width:70%;text-align:right;">
            <p>免费热线：400-168-9979</p>
            <p>电子邮箱：bj@letsun.com.cn</p>
            <p>Copyright&nbsp;©&nbsp;2015-2016 立信创源 &nbsp;&nbsp;ww.letsun.com.cn &nbsp;版权所有</p>
            <p>Power by 粤ICP备13083109号</p>
        </div>
        <div style="float:right;width:30%;text-align:center;">
            <img src="../images/down_m.png" style="width:100px;height:100px;">
            <img src="../images/weixian_er.png" style="width:100px;height:100px;">
        </div>
    </div>
</div>
<!-- footer:页脚  end -->

<script type="text/javascript">
    var $path = "/shop-pc";
</script>

<script>
    function calculate() {
        //通过样式判断购物车item
        var len = $(".cartPanel").length;
        if (len > 0) {
            $("#validation-form").submit();
        } else {
            alertSuccess("您的购物车内没有商品");
        }
    }

    function judgeSelect() {
        var notAllSelect = $('.page-content .selectStatus').is(":hidden");
        if (!notAllSelect) {
            $('.radioAll .cancelStatus').hide();
            $('.radioAll .selectStatus').show();
        } else {
            $('.radioAll .selectStatus').hide();
            $('.radioAll .cancelStatus').show();
        }
    }

    /*购物车-选中产品*/
    function selectGood(obj) {
        var goodid = $(obj).attr("data-good");

        $("#goodItem" + goodid).children('.cancelStatus').hide();
        $("#goodItem" + goodid).children('.selectStatus').show();

        judgeSelect();

        var num = $("#num" + goodid).text();
        updateCartItem(goodid, num, 1);

    }

    /*购物车-取消选中产品*/
    function cancelGood(obj) {
        var goodid = $(obj).attr("data-good");
        $("#goodItem" + goodid).children('.selectStatus').hide();
        $("#goodItem" + goodid).children('.cancelStatus').show();

        judgeSelect();

        var num = $("#num" + goodid).text();
        updateCartItem(goodid, num, 0);
    }

    /*购物车-删除产品*/
    function delGood(num) {
        $("#cartItem" + num).remove();
        delCartItem(num);
    }

    /*购物车-数量添加*/
    function addNum(id) {

        var num = $("#num" + id).text();
        num = (num > 99) ? 1 : parseInt(num) + 1;
        $("#num" + id).text(num);

        updateCartItem(id, num, 3);
    }

    /*购物车-数量减少*/
    function reduceNum(id) {
        var num = $("#num" + id).text();

        if (num < 2) {
            num = 1;
            $("#num" + id).text(num);
        } else {
            num = parseInt(num) - 1;
            $("#num" + id).text(num);
            updateCartItem(id, num, 3);
        }
    }

    /*购物车-全选*/
    function selectAll() {
        $('.cancelStatus').hide();
        $('.selectStatus').show();

        allCartItem(1);
    }

    /*购物车-全不选*/
    function cancelAll() {
        $('.selectStatus').hide();
        $('.cancelStatus').show();

        allCartItem(0);
    }

    /*模态窗口显示*/
    function showMask() {
        $('.mask').show();
    }
    /*模态窗口关闭*/
    function hideMask() {
        $('.mask').hide();
    }


    function updateCartItem(gid, amount, status) {
        showMask();
        $.ajax({
            url: "/shop-pc/cart/update",
            data: "goods.id=" + gid + "&amount=" + amount + "&status=" + status,//{goods.id:"'+gid+'",amount:"'+amount+'"},
            type: "post",
            success: function (data) {
                if (data.code == "200") {

                    var result = eval('(' + data.result + ')');
                    //alert(result.amount);
                    $('#sumNum').text(result.amount);
                    $('#money').text(result.total);
                }
                setTimeout("hideMask()", 100);
            },
            cache: false,
            error: function () {
                setTimeout("hideMask()", 100);
            }
        });
    }


    function delCartItem(gid) {
        showMask();
        $.ajax({
            url: "/shop-pc/cart/del/" + gid + "",
            type: "post",
            success: function (data) {
                if (data.code == "200") {

                    var result = eval('(' + data.result + ')');
                    //alert(result.amount);
                    $('#sumNum').text(result.amount);
                    $('#money').text(result.total);
                }
                setTimeout("hideMask()", 100);
            },
            cache: false,
            error: function () {
                setTimeout("hideMask()", 100);
            }
        });
    }


    function allCartItem(flag) {
        showMask();
        $.ajax({
            url: "/shop-pc/cart/all/" + flag + "",
            type: "post",
            success: function (data) {
                if (data.code == "200") {

                    var result = eval('(' + data.result + ')');
                    //alert(result.amount);
                    $('#sumNum').text(result.amount);
                    $('#money').text(result.total);
                }
                setTimeout("hideMask()", 100);
            },
            cache: false,
            error: function () {
                setTimeout("hideMask()", 100);
            }
        });
    }

    judgeSelect();
</script>

</body>
</html>